import { useState } from 'react';
import { FlatList,StyleSheet,Platform,Image,Pressable } from "react-native";
export default function EmojiList({onSelect,emojiList, onCloseModal}) {
  const [emoji] = useState([
    require('../assets/images/EMOJI-15.png'),
    require('../assets/images/EMOJI-16.png'),
    require('../assets/images/EMOJI-41.png'),
    require('../assets/images/EMOJI-56.png'),
    require('../assets/images/EMOJI-66.png'),
    require('../assets/images/EMOJI-99.png'),
  ]);
  return (
    <FlatList
      horizontal
      showHorizontalScrollIndicator = {Platform.OS === 'web'}
      data = {emoji}
      contentContainerStyle={styles.listContainer}
      renderItem = {
        ({item,index}) => {
          return (
            <Pressable
              onPress={()=>{
                onSelect([...emojiList,item]);
                onCloseModal();
              }}
            >
              <Image source={item} key={index} style={styles.image}/>
            </Pressable>
          )
        }
      }
    />
  );
}

const styles = StyleSheet.create({
  listContainer: {
    borderTopRightRadius: 10,
    borderTopLeftRadius: 10,
    paddingHorizontal: 20,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  image: {
    width: 100,
    height: 100,
    marginRight: 20,
  }
});
